$(function () {

    //大轮播图
    bannerBig()

    function bannerBig() {
        fetch('../../api/index/banner.json')
            .then(result => result.json())
            .then(data => {
                // console.log(data)
                let imgsBox = document.querySelector('.banner ul')
                imgsBox.innerHTML = composing(data)
                slideshow()
            })

        function composing(data) {
            return data.map((img, index) => {
                return '<li><img src="../../images/frontEnd/banner/' + img + '" alt=""></li>'
            })
        }

        function slideshow() {
            let imgs = $('.banner .banner_img img')
            let btns = document.querySelectorAll('.banner .banner_small div')
            let imgsBox = document.querySelector('.banner ul')
            let num = 0
            // console.log(imgs, btns, imgsBox)

            function move(i) {
                imgsBox.style.marginLeft = -100 * i + '%'
            }
            // move(3)
            let set = setInterval(auto, 4000)

            function auto() {
                if (num >= imgs.length - 1) {
                    num = 0
                }
                num++
                move(num)
                color(num)

            }

            function color(e) {
                for (let i = 0; i < btns.length; i++) {
                    if (e == i) {
                        btns[i].classList.add('active')
                    } else {
                        btns[i].classList.remove('active')
                    }
                }
            }
            btns.forEach((btn, index) => {
                btn.onclick = (() => {
                    clearInterval(set)
                    set = setInterval(auto, 4000)
                    move(index)
                    color(index)
                })
            })

            imgsBox.addEventListener("mouseenter", () => {
                clearInterval(set);
            });

            imgsBox.addEventListener("mouseleave", () => {
                clearInterval(set);
                set = setInterval(auto, 4000)
            });

        }
    }


    //重要公告
    proclamation()

    function proclamation() {
        fetch('../../api/index/notice.json')
            .then(result => result.json())
            .then(data => {
                //  console.log(data)
                ul.innerHTML = composing(data)
                notice()
            })
        let ul = document.querySelector('.proclamation .notice_main ul')

        function composing(data) {
            return data.map((li, index) => {
                return '<li>' + li + '</li>'
            }).join('')
        }

        function notice() {
            let lis = $('.proclamation .notice_main ul li')
            let num = 0

            function move(i) {
                ul.style.marginTop = -40 * i + 'px'
                ul.style.transition = '1s'
            }
            //  console.log('公告',lis,ul)
            let set = setInterval(auto, 4000)

            function auto() {
                if (num >= lis.length - 1) {
                    num = 0
                }
                num++
                move(num)
            }
        }
    }


    // 快速入口 快捷功能区
    shortCut_area()

    function shortCut_area() {
        fetch('../../api/index/shortCut.json')
            .then(result => result.json())
            .then(data => {
                // console.log(data)
                let ul = $('.shortCut_area ul')[0]
                ul.innerHTML = composing(data)
            })

        function composing(data) {
            return data.map((item, index) => {
                return ' \
                    <li>\
                        <div class="serveTop">\
                            <img src="' + item.img + '" alt="">\
                            <p>' + item.description + '</p>\
                        </div>\
                        <div class="serveButtom">查看更多>></div>\
                    </li>'
            }).join('')
        }
    }


    // 外汇业务
    exchange_business()

    function exchange_business() {
        fetch('../../api/index/foreign.json')
            .then(result => result.json())
            .then(data => {
                let firstul = data.first
                let secondul = data.second
                // console.log(first,second)
                render(first, firstul)
                render(second, secondul)
            })
        let first = document.querySelector('.exchange_business .first')
        let second = document.querySelector('.exchange_business .second')

        function render(ul, data) {
            ul.innerHTML = composing(data)
        }

        function composing(data) {
            return data.map((item, index) => {
                return '\
                <li>\
                    <div>\
                        <img src="../../images/frontEnd/foreign/' + item.img + '" alt="">\
                    </div>\
                    <div></div>\
                    <div>\
                        <p>' + item.title + '</p>\
                        <p class="one">' + item.content + '</p>\
                        <p class="more">了解更多</p>\
                    </div>\
                </li>'
            }).join('')
        }
    }


    //便利金融
    financial()

    function financial() {
        fetch('../../api/index/financial.json')
            .then(result => result.json())
            .then(data => {
                // console.log("aoaoang",data)
                arr(data)
                ul.innerHTML = composing(data.one)
            })

        let ul = document.querySelector('.financial .body .content ul')
        let spans = document.querySelectorAll('.financial .body .title span')

        function arr(data) {
            let str = ''
            let arr = new Array()
            for (let num in data) {
                str += num + ','
            }
            arr = str.split(',')
            arr = arr.slice(0, 6)
            arr.forEach((a, index) => {
                // console.log(a)
                $(spans[index]).mouseenter(function () {
                    ul.innerHTML = composing(data[a])
                    $('.financial .body .content ul li').addClass('move4');
                });
            })
        }

        function composing(data) {
            return '\
                <li>\
                    <div class="left">\
                        <img src="' + data.img1 + '" alt="">\
                        <div>\
                            <p>' + data.text1 + '</p>\
                            <div class="point"></div>\
                            <p>&nbsp;&nbsp;&nbsp;' + data.text2 + '</p>\
                            <div class="point"></div>\
                            <p>&nbsp;&nbsp;&nbsp;' + data.text3 + '</p>\
                            <div class="hurry">' + data.text4 + '</div>\
                        </div>\
                    </div>\
                    <div class="right">\
                        <div>\
                            <div class="top">\
                                <p>' + data.text5 + '</p>\
                                <div class="onee">\
                                    <div class="point"></div>\
                                    <div>' + data.text6 + '</div>\
                                </div>\
                                <div class="onee">\
                                    <div class="point"></div>\
                                    <div>' + data.text7 + '</div>\
                                </div>\
                            </div>\
                            <div class="buttom">\
                                <div class="hurry">' + data.text8 + '</div>\
                                <img src="' + data.img2 + '" alt="">\
                            </div>\
                        </div>\
                        <div>\
                            <div class="top">\
                                <p>' + data.text9 + '</p>\
                                <div class="onee">\
                                    <div class="point"></div>\
                                    <div>' + data.text10 + '</div>\
                                </div>\
                                <div class="onee">\
                                    <div class="point"></div>\
                                    <div>' + data.text11 + '</div>\
                                </div>\
                            </div>\
                            <div class="buttom">\
                                <div class="hurry">' + data.text8 + '</div>\
                                <img src="' + data.img3 + '" alt="">\
                            </div>\
                        </div>\
                    </div>\
                </li>'
        }

    }

    // 小轮播图
    bannerSmall()

    function bannerSmall() {
        let imgs = $('.special_offer .body .content .left .img img')
        let btns = $('.special_offer .body .content .left .box div')
        let imgsBox = document.querySelector('.special_offer .body .content .left .img')
        let num = 0
        // console.log(imgs,btns,imgsBox)
        function move(i) {
            imgsBox.style.marginLeft = -456 * i + 'px'
        }
        // move(2)
        let set = setInterval(auto, 3000)

        function auto() {
            if (num >= imgs.length - 1) {
                num = -1
            }
            num++
            move(num)
            color(num)
        }

        function color(e) {
            for (let i = 0; i < btns.length; i++) {
                if (e == i) {
                    btns[i].classList.add('active')
                } else {
                    btns[i].classList.remove('active')
                }
            }
        }

        function btn() {
            for (let i = 0; i < btns.length; i++) {
                btns[i].onclick = (() => {
                    clearInterval(set)
                    set = setInterval(auto, 4000)
                    move(i)
                    color(i)
                })
            }
        }
        btn()
    }


    //动画效果
    animat()

    function animat() {
        window.onscroll = () => {
            // console.log($(window).scrollTop(), 'oag')
            if ($(window).scrollTop() >= 520) {
                $('.investment').addClass('move1');
            }
            if ($(window).scrollTop() >= 1200) {
                $('.exchange_business > div').addClass('move2');
            }
            if ($(window).scrollTop() >= 1300) {
                $('.exchange_business .left ul li').addClass('move3');
            }
            if ($(window).scrollTop() >= 1550) {
                $('.financial').addClass('move3');
            }
            if ($(window).scrollTop() >= 1660) {
                $('.financial .body .content ul li').addClass('move4');
            }
            if ($(window).scrollTop() >= 2220) {
                $('.special_offer .body .img .pic').addClass('move5');
            }
        }
    }


})